<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Invs(1)">
				<view class="tab-name">车主报修</view>
				<view class="tab-lang">
					ئاپتوموبىل ئىگىسى رېمونت قىلىش
				</view>
			</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Invs(2)">
				<view class="tab-name">操作员报修</view>
				<view class="tab-lang">
					مەشغۇلاتچى رېمونت قىلىش
				</view>
			</view>
		</view>
		<view>
			<view class="" v-show="Inv == 1">
				<view class="addTop">
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">姓名</text>
							<text class="wyyname">
								ئىسىم
							</text>
						</view>
						<view class="inputRight">
							<input class="inputname" v-model="name" type="text" placeholder="请输入姓名" />
							<view class="wyyname">
								ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
							</view>
						</view>
					</view>
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">联系电话</text>
							<text class="wyyname">
								ئالاقىلىشىش تېلېفون نومۇرى
							</text>
						</view>
						<view class="inputRight">
							<input class="inputname" v-model="mobile" type="text" placeholder="请输入电话" />
							<view class="wyyname">
								تېلېفون كىرگۈزۈڭ
							</view>
						</view>
					</view>
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">选择车辆</text>
							<text class="wyyname">
								ئاپتوموبىل تاللاش
							</text>
						</view>

						<view v-if="carList.length !== 0">
							<picker @change="bindPickerChange" :value="index" range-key="car_number" :range="array">
								<view v-if="index==-1" class="nameRight">
									<view class="">
										<view class="inputname">请选择车辆</view>
										<view class="wyyname">
											ئاپتوموبىل تاللاش
										</view>
									</view>
									<view class="iconLeft">
										>
									</view>
								</view>
								<view v-else class="nameRight">
									{{array[index].car_number}}
								</view>
							</picker>
						</view>
						<view class="toCar" v-else>
							<view @click="toaddcar" class="nameRight">
								<view class="">
									<view class="inputname">添加车辆</view>
									<view class="wyyname">
										ئاپتوموبىل قوشۇش
									</view>
								</view>
								<view class="iconLeft">
									>
								</view>
							</view>
						</view>
					</view>
					<view class="nameText">
						<view class="nameLeft">
							<text class="name">故障描述</text>
							<text class="wyyname">
								كاشىلىنى تەسۋىرلەش
							</text>
						</view>
						<view class="downText">
							<!-- <input class="inputname" type="" placeholder="请输入您的问题" /> -->
							<textarea class="textareas" v-model="describe" placeholder="请输入您的问题" auto-height />
							<view class="wyyname">
								سىز كىرگۈزۈڭ مەسىلىسى
							</view>
						</view>
					</view>
				</view>
				<!-- 上传 -->
				<view class="upLoad">
					<view class="upLoad_title">上传故障现场照片</view>
					<view class="upLoadLang">
						كاشىلا نەق مەيدان رەسىم يوللاش
					</view>
					<view class="showimg_box">
						<view class="show_img" @click="ChooseImage">
							<view class="imgAdd">+</view>
							<view class="btnUpload">上传</view>
							<view class="imgLang">
								يوللاش
							</view>
						</view>
						<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
							<view class="icon-cuo" @click="delect(index)">
								<image class="closeImage" src="../../static/img/close.png" mode=""></image>
							</view>
							<image class="images" :src="item" @click="lookImg(index)"></image>
						</view>
					</view>
				</view>
				<!-- 上传故障现场视频 -->
				<view class="upLoadPeople">
					<view class="upLoad_title">上传故障现场视频</view>
					<view class="upLoadLang">
						كاشىلا نەق مەيدان كۆرۈنمە چاستوتا يوللاش
					</view>
					<!-- 身体条件证明 -->
					<view class="positive">
						<view v-if="examinationUrl == ''" class="positivePeople" @click="upLoadExamination">
							<view class="addimg">+</view>
							<view class="btnPeople">上传故障现场视频</view>
							<view class="imgLang">
								سىياسىي ئارقا كۆرۈنۈشنى تەكشۈرۈش جەدۋىلى
							</view>
						</view>
						<view v-if='examinationUrl' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleExamination"></image>
							<video class="positiveImages" :src="examinationUrl"></video>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-show="Inv == 2">
				<view class="addTop">
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">姓名</text>
							<text class="wyyname">
								ئىسىم
							</text>
						</view>
						<view class="inputRight">
							<input class="inputname" v-model="name" type="text" placeholder="请输入姓名" />
							<view class="wyyname">
								ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
							</view>
						</view>
					</view>
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">联系电话</text>
							<text class="wyyname">
								ئالاقىلىشىش تېلېفون نومۇرى
							</text>
						</view>
						<view class="inputRight">
							<input class="inputname" v-model="mobile" type="text" placeholder="请输入电话" />
							<view class="wyyname">
								تېلېفون كىرگۈزۈڭ
							</view>
						</view>
					</view>
					<view class="nameBox">
						<view class="nameLeft">
							<text class="name">选择车辆</text>
							<text class="wyyname">
								ئاپتوموبىل تاللاش
							</text>
						</view>

						<view v-if="carList.length !== 0">
							<picker @change="bindPickerChange" :value="index" range-key="car_number" :range="array">
								<view v-if="index==-1" class="nameRight">
									<view class="">
										<view class="inputname">请选择车辆</view>
										<view class="wyyname">
											ئاپتوموبىل تاللاش
										</view>
									</view>
									<view class="iconLeft">
										>
									</view>
								</view>
								<view v-else class="nameRight">
									{{array[index].car_number}}
								</view>
							</picker>
						</view>
						<view class="toCar" v-else>
							<view @click="toaddcar" class="nameRight">
								<view class="">
									<view class="inputname">添加车辆</view>
									<view class="wyyname">
										ئاپتوموبىل قوشۇش
									</view>
								</view>
								<view class="iconLeft">
									>
								</view>
							</view>
						</view>
					</view>
					<view class="nameText">
						<view class="nameLeft">
							<text class="name">故障描述</text>
							<text class="wyyname">
								كاشىلىنى تەسۋىرلەش
							</text>
						</view>
						<view class="downText">
							<!-- <input class="inputname" type="" placeholder="请输入您的问题" /> -->
							<textarea class="textareas" v-model="describe" placeholder="请输入您的问题" auto-height />
							<view class="wyyname">
								سىز كىرگۈزۈڭ مەسىلىسى
							</view>
						</view>
					</view>
				</view>
				<!-- 上传 -->
				<view class="upLoad">
					<view class="upLoad_title">上传故障现场照片</view>
					<view class="upLoadLang">
						كاشىلا نەق مەيدان رەسىم يوللاش
					</view>
					<view class="showimg_box">
						<view class="show_img" @click="ChooseImage">
							<view class="imgAdd">+</view>
							<view class="btnUpload">上传</view>
							<view class="imgLang">
								يوللاش
							</view>
						</view>
						<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
							<view class="icon-cuo" @click="delect(index)">
								<image class="closeImage" src="../../static/img/close.png" mode=""></image>
							</view>
							<image class="images" :src="item" @click="lookImg(index)"></image>
						</view>
					</view>
				</view>
				<!-- 上传故障现场视频 -->
				<view class="upLoadPeople">
					<view class="upLoad_title">上传故障现场视频</view>
					<view class="upLoadLang">
						كاشىلا نەق مەيدان كۆرۈنمە چاستوتا يوللاش
					</view>
					<!-- 身体条件证明 -->
					<view class="positive">
						<view v-if="examinationUrl == ''" class="positivePeople" @click="upLoadExamination">
							<view class="addimg">+</view>
							<view class="btnPeople">上传故障现场视频</view>
							<view class="imgLang">
								سىياسىي ئارقا كۆرۈنۈشنى تەكشۈرۈش جەدۋىلى
							</view>
						</view>
						<view v-if='examinationUrl' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleExamination"></image>
							<video class="positiveImages" :src="examinationUrl"></video>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- button -->
		<view class="footer_button">
			<view class="subCommit" @click="submit">
				<view class="conBtn">提交</view>
				<view class="btnLang">
					تاپشۇرۇش
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default {
		data() {
			return {
				Inv: 1,
				index: -1,
				id: '',
				imgList: [],
				name: '', //姓名
				mobile: '', //手机
				describe: '', //描述
				images: '',
				page: 1,
				limit: 10,
				imgArr: "",
				array: [],

				count: "",
				examinationUrl: '',
				isShow: false,
				carList: []
			}
		},
		onLoad(v) {
			if (v.id) {
				this.id = v.id
				this.getOrderDetail()
			}
			this.getcar()
		},
		methods: {
			Invs(v) {
				if (v === 1) {
					this.Inv = 1
					this.name = '',
						this.mobile = '',
						this.describe = '',
						this.imgList = [],
						this.examinationUrl = ''
				} else {
					this.Inv = 2
					this.name = '',
						this.mobile = '',
						this.describe = '',
						this.imgList = [],
						this.examinationUrl = ''
				}
			},
			toaddcar() {
				app.nto('mine/addCar')
			},
			//获取车辆列表
			getcar() {
				app.request('operator_car', {}).then(res => {
					console.log(res)
					this.carList = res.data

				})
			},
			//详情
			getOrderDetail() {
				app.load()
				var data = {
					id: this.id
				}
				app.request('repair_detail', data).then(respones => {
					let res = respones.data
					if (res.type === 1) {
						this.Inv = 1
						this.imgList = res.images
						this.name = res.name
						this.mobile = res.mobile
						this.describe = res.describe,
							this.examinationUrl = res.video
					} else {
						this.Inv = 2
						this.imgList = res.images
						this.name = res.name
						this.mobile = res.mobile
						this.describe = res.describe,
							this.examinationUrl = res.video
					}
					app.hide()
				})
			},
			//获取车辆列表

			bindPickerChange(e) {
				console.log(e)
				this.index = e.target.value
			},
			//取消订单
			cancelorder(id, index) {
				app.confirm('是否取消该订单？', (res) => {
					app.load()
					let data = {
						id,
					}
					app.request('repair_del', data, 'POST').then(res => {
						this.array.splice(index, 1)
						app.hide()
					})
				}, () => {})
			},
			submit() {

				if (!this.name) {
					app.toast('请输入姓名')
					return
				}
				if (!app.isphoneNumber(this.mobile)) {
					app.toast('请输入手机号')
					return
				}
				// if(!this.array[index].car_number){ 
				// 	app.toast('请选择车辆')
				// 	return
				// }
				if (!this.describe) {
					app.toast('请输入故障描述')
					return
				}
				if (!this.imgList.length) {
					app.toast('请上传故障图片')
					return
				}


				let data = {
					type: this.Inv,
					name: this.name,
					mobile: this.mobile,
					car_number: 'ssssss',
					describe: this.describe,
					images: this.imgList.join(','),
					video: this.examinationUrl

				}
				app.request('repair', data, 'POST').then(res => {
					app.toast('添加成功')
					app.nto('carRepair/carRepair')
					this.getcarlist()
				})
			},
			// 上传头像
			ChooseImage() {
				app.fileupload(res => {
					console.log(11111, res)
					this.imgList.push(res)
				})
			},
			// 删除
			delect(index) {
				this.imgList.splice(index, 1)
			},
			// 预览
			lookImg(val) {
				const urls = this.imgList
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			// 审查上传
			upLoadExamination() {
				app.fileupload(res => {
					console.log(11111, res)
					this.examinationUrl = res
				})
			},
			// 审查删除
			deleExamination() {
				this.examinationUrl = ''
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background: #F5F5F5;
		font-family: PingFang SC;
		padding: 140rpx 0 130rpx 0;
	}

	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		padding: 19rpx;

	}

	.tab-name {
		font-size: 30rpx;
		font-weight: 500;
	}

	.activeName {
		border-bottom: 1px solid red;
	}

	.tab-lang {
		font-size: 24rpx;
		font-weight: 400;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0rpx 20rpx;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.inv-h {
		font-size: 30rpx;
		flex: 1;
		text-align: center;
		color: #999999;
		padding: 20rpx 0 15rpx 0;
	}

	.inv-h-se {
		color: #FFC03C;
		border-bottom: 4rpx solid #FFC03C;
	}

	.content-hender {
		padding: 20rpx;
	}

	.content-list {
		background: #FFFFFF;
		padding: 0rpx 28rpx 20rpx 24rpx;
		margin-top: 20rpx;
	}

	.cartPeople {
		padding: 3rpx 8rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFC03C;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFC03C;
	}

	.list-header {
		border-bottom: 1px solid #F5F5F5;
		padding: 18rpx 0;
	}

	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.left .icImage {
		display: block;
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
	}

	.right {
		display: flex;
		flex-direction: column;
	}

	.status {
		font-size: 24rpx;
		font-weight: 500;
		color: #FFC03C;
		text-align: right;
	}

	.statusColor {
		font-size: 20rpx;
		font-weight: 500;
		color: #FFC03C;
		margin-top: 10rpx;
	}

	.list-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		padding-top: 29rpx;
	}

	.list-name span {
		margin-left: 20rpx;
	}

	.phone {
		margin-top: 30rpx;
	}

	.refuse {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FF3C3C;
	}

	.refuse .activeImage {
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.closeOrder {
		padding: 5rpx 20rpx;
		border: 1rpx solid #BFBFBF;
		border-radius: 10rpx;
		text-align: center;
		color: #333333;
	}

	.btnLang {
		font-size: 24rpx;
		font-weight: 400;

	}

	.btnClose {
		font-size: 30rpx;
		font-weight: 500;
	}

	.btn {
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #F5F5F5;
		margin-top: 30rpx;
		padding: 20rpx 0 10rpx 0;
	}

	/* 选项卡二表单 */
	.addTop {
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.nameBox {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}

	.nameText {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0 68rpx 0;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #999999;
	}

	.nameBox:nth-last-child(1) {
		border-bottom: 0rpx #eee solid;
	}

	.nameLeft {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 30rpx;
		color: #333333;
	}

	.wyynae {
		padding-top: 18rpx;
	}

	.nameRight {
		display: flex;
		align-items: flex-end;
		align-items: center;
	}

	.inputRight {
		display: flex;
		flex-direction: column;
		text-align: right;
	}

	.iconLeft {
		margin-left: 30rpx;
		width: 9rpx;
		height: 16rpx;
	}

	.inputname {
		font-size: 30rpx;
		text-align: right;
		max-width: 300rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.center {
		font-size: 30rpx;
		color: #999999;
	}

	.downText {
		margin-top: 50rpx;
	}

	/* 上传 */
	/* 上传 */
	.upLoad {
		padding: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.upLoad_title {
		font-size: 30rpx;
	}

	.upLoadLang {
		font-size: 24rpx;
	}

	.showimg_box {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.show_img {
		width: 218rpx;
		height: 218rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
	}

	.imgAdd {
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.btnUpload {
		font-size: 24rpx;
		font-weight: 500;
	}

	.imgLang {
		font-size: 18rpx;
	}

	.images {
		display: block;
		width: 210rpx;
		height: 210rpx;
		z-index: 999;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 10rpx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	.closeImage {
		display: block;
		width: 26rpx;
		height: 26rpx;
	}

	/* 上传身份证 */
	.upLoadPeople {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.positivePeople {
		width: 100%;
		height: 360rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
		position: relative;
	}

	.addimg {
		font-weight: 500;
		font-size: 60rpx;
		margin-top: 60rpx;
	}

	.btnPeople {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 25rpx;
	}

	.positiveImages {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.closeImage {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	/* 提交 */
	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.subCommit {
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.conBtn {
		font-size: 30rpx;
		text-align: center;
	}

	.btnLang {
		font-size: 24rpx;
		text-align: center;
	}

	.empty {
		padding-top: 150rpx;
		text-align: center;
		color: #666666;
		font-size: 30rpx;
	}
</style>
